<template>
  <div class="detail">
    <HeaderBar>
      <template #back>
        <van-icon name="arrow-left" @click="back()" />
      </template>
      详情页面
    </HeaderBar>

    <div class="desc">
      <img :src="item.img|wh('110.150')" alt="">
      <div>
        <h2>{{item.nm}}</h2>
        <p>{{item.showInfo}}</p>
        <p>{{item.star}}</p>
      </div>
    </div>

    <div class="bar">
      <ul :style="{left:left+'vw'}">
        <li :ref="'li'+index" :class="{active: index === selecedIndex }" @click="handleChange(index,$event)" 
        v-for="(item,index) in showDays.dates" :key="index">{{item.date}}</li>
      </ul>
    </div>

  </div>
</template>


<script>
import HeaderBar from "@/components/HeaderBar"
import { post } from "@/api/http"

export default {
  data() {
    return {
      left: 0,
      selecedIndex: 0,
      showDays:{
        dates:[]
      }
    }
  },
  async created() {
    ///ajax/movie
    let rs = await post("/ajax/movie", {
      movieId: this.item.id,
      day: "2020-09-03",
      offset: 0,
      limit: 20,
      districtId: -1,
      lineId: -1,
      hallType: -1,
      brandId: -1,
      serviceId: -1,
      areaId: -1,
      stationId: -1,
      item: "",
      updateShowDay: true,
      reqId: 1599114747773,
      cityId: 10,
      optimus_code: 10
    })

    console.log(rs)
    this.showDays.dates=rs.data.showDays.dates;
  },
  components: {
    HeaderBar
  },
  computed: {
    item() {
      return this.$route.query
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    handleChange(index, event) {
      this.selecedIndex = index
      console.log(event.pageX)
      //当前点击的坐标位置
      let currentX = event.pageX
      //取到每个bar的真实宽度
      let width = this.$refs.li0[0].getBoundingClientRect().width
      if (currentX > width * 2 && index < 5) {
        this.left -= 33.3333
      } else if (currentX < width && index > 0) {
        this.left += 33.3333
      }
    }
  },
  mounted() {
    console.log(this.$route.query)
  }
}
</script>

<style lang="scss" >
.detail {
  .van-icon-arrow-left::before {
    font-size: 20px;
  }
  .desc {
    padding: 15px;
    display: flex;
  }

  .bar {
    position: relative;
    height: 50px;
    overflow: hidden;
    ul {
      position: absolute;
      top: 0px;
      transition: all 1s;
      /* display: flex; */
      overflow: scroll;
      white-space: nowrap;
      li {
        width: 125px;
        display: inline-block;
        line-height: 43px;
        text-align: center;
      }
    }

    .active {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0px;
        height: 2px;
        left: 0px;
        background: red;
        width: 115px;
      }
    }
  }
}
</style>


